<template>
  <div class="code-diff-page">
    <div class="diff-container">
      <h1>在线代码对比</h1>
      
      <div class="editors-container">
        <div class="diff-editor">
          <div class="editor-label">原始代码：</div>
          <el-input
            type="textarea"
            :rows="15"
            placeholder="请输入原始代码"
            v-model="originalCode"
            class="code-input"
          />
        </div>
        
        <div class="diff-editor">
          <div class="editor-label">修改后的代码：</div>
          <el-input
            type="textarea"
            :rows="15"
            placeholder="请输入修改后的代码"
            v-model="modifiedCode"
            class="code-input"
          />
        </div>
      </div>

      <div class="button-group">
        <el-button type="primary" @click="compareCodes">
          <el-icon><DocumentCopy /></el-icon>
          对比代码
        </el-button>
        <el-button @click="clearAll">
          <el-icon><Delete /></el-icon>
          清空
        </el-button>
        <el-button @click="loadDemo">
          <el-icon><Monitor /></el-icon>
          示例
        </el-button>
        <el-button type="warning" @click="goToHomepage">
          <el-icon><Back /></el-icon>
          返回
        </el-button>
      </div>

      <div v-if="diffResult" class="diff-result" v-html="diffResult"></div>

      <div class="notes">
        <h3>帮助说明：</h3>
        <ul>
          <li>在左侧输入框中粘贴原始代码</li>
          <li>在右侧输入框中粘贴修改后的代码</li>
          <li>点击"对比代码"按钮查看差异</li>
          <li><span class="diff-added-example">绿色背景</span>表示新增的内容</li>
          <li><span class="diff-removed-example">红色背景</span>表示删除的内容</li>
          <li>支持任意文本格式的对比</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { DocumentCopy, Delete, Back, Monitor } from '@element-plus/icons-vue'

const router = useRouter()
const originalCode = ref('')
const modifiedCode = ref('')
const diffResult = ref('')

const demoCode = {
  original: `<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0,user-scalable=yes,maximum-scale=1.0">
</head>`,
  modified: `<head>
    <meta charset="utf-8">
    <meta name="viewport" content="">
</head>`
}

function escapeHtml(unsafe) {
  return unsafe
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;")
}

const simpleDiff = (oldStr, newStr) => {
  const changes = []
  let i = 0
  let j = 0

  while (i < oldStr.length || j < newStr.length) {
    if (i < oldStr.length && j < newStr.length && oldStr[i] === newStr[j]) {
      changes.push({ value: oldStr[i] })
      i++
      j++
    } else {
      let oldIndex = newStr.indexOf(oldStr[i], j)
      let newIndex = oldStr.indexOf(newStr[j], i)

      if (newIndex === -1) {
        changes.push({ added: true, value: newStr[j] })
        j++
      } else if (oldIndex === -1) {
        changes.push({ removed: true, value: oldStr[i] })
        i++
      } else {
        if (oldIndex - j < newIndex - i) {
          changes.push({ added: true, value: newStr[j] })
          j++
        } else {
          changes.push({ removed: true, value: oldStr[i] })
          i++
        }
      }
    }
  }

  return changes
}

const compareCodes = () => {
  if (!originalCode.value.trim() || !modifiedCode.value.trim()) {
    ElMessage.warning('请输入需要对比的代码')
    return
  }

  const original = originalCode.value.split('\n')
  const modified = modifiedCode.value.split('\n')
  let result = ''

  const diff = simpleDiff(original, modified)

  diff.forEach(change => {
    if (change.added) {
      result += `<div class="diff-added">
        <span class="diff-mark">+</span>
        <span class="diff-content">${escapeHtml(change.value)}</span>
      </div>`
    } else if (change.removed) {
      result += `<div class="diff-removed">
        <span class="diff-mark">-</span>
        <span class="diff-content">${escapeHtml(change.value)}</span>
      </div>`
    } else {
      result += `<div class="diff-unchanged">
        <span class="diff-mark">&nbsp;</span>
        <span class="diff-content">${escapeHtml(change.value)}</span>
      </div>`
    }
  })

  diffResult.value = result
  ElMessage.success('对比完成')
}

const clearAll = () => {
  originalCode.value = ''
  modifiedCode.value = ''
  diffResult.value = ''
  ElMessage.success('已清空')
}

const loadDemo = () => {
  originalCode.value = demoCode.original
  modifiedCode.value = demoCode.modified
  ElMessage.success('示例代码已加载')
}

const goToHomepage = () => {
  router.push('/')
}
</script>

<style lang="scss" scoped>
.code-diff-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;

  .diff-container {
    max-width: 1200px;
    width: 96%;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    padding: 30px;
    box-sizing: border-box;
    margin: 10px auto;

    h1 {
      text-align: center;
      color: #4a5568;
      font-size: 28px;
      margin-bottom: 30px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }

    .editors-container {
      display: flex;
      gap: 20px;
      margin-bottom: 30px;

      @media (max-width: 768px) {
        flex-direction: column;
      }

      .diff-editor {
        flex: 1;

        .editor-label {
          font-size: 14px;
          color: #606266;
          margin-bottom: 8px;
          text-align: left;
        }

        .code-input {
          :deep(.el-textarea__inner) {
            font-family: 'Monaco', 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.6;
            padding: 12px;
            border-radius: 8px;
            text-align: left;
            background-color: #f8fafc;
            border-color: #dcdfe6;
            color: #2c3e50;
            
            &:focus {
              border-color: #409EFF;
              box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
            }

            &::placeholder {
              color: #909399;
            }
          }
        }
      }
    }

    .button-group {
      display: flex;
      gap: 15px;
      justify-content: center;
      margin: 20px 0;

      .el-button {
        min-width: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 8px;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .el-icon {
          font-size: 16px;
        }
      }

      @media (max-width: 768px) {
        flex-direction: column;
        gap: 10px;

        .el-button {
          width: 100%;
        }
      }
    }

    .diff-result {
      margin-top: 30px;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 15px;
      font-family: 'Monaco', 'Courier New', monospace;
      font-size: 14px;
      line-height: 1.6;
      background-color: #f8f8f8;
      overflow-x: auto;
      text-align: left;

      .diff-added, .diff-removed, .diff-unchanged {
        display: flex;
        align-items: flex-start;
        padding: 4px 0;
        white-space: pre-wrap;
        word-break: break-all;

        .diff-mark {
          width: 20px;
          font-weight: bold;
          user-select: none;
          padding-right: 8px;
        }

        .diff-content {
          flex: 1;
          padding: 0 8px;
        }
      }

      .diff-added {
        background-color: #e6ffed;
        border-left: 4px solid #2cbe4e;

        .diff-mark {
          color: #2cbe4e;
        }

        .diff-content {
          color: #24292e;
          background-color: #e6ffed;
        }
      }

      .diff-removed {
        background-color: #ffeef0;
        border-left: 4px solid #f66a6a;

        .diff-mark {
          color: #f66a6a;
        }

        .diff-content {
          color: #24292e;
          background-color: #ffeef0;
        }
      }

      .diff-unchanged {
        border-left: 4px solid transparent;
        padding-left: 4px;

        .diff-mark {
          color: #6a737d;
        }

        .diff-content {
          color: #24292e;
        }
      }
    }

    .notes {
      margin-top: 40px;
      padding: 20px;
      background-color: #f0f5ff;
      border-radius: 12px;
      color: #606266;
      text-align: left;

      h3 {
        color: #409EFF;
        margin: 0 0 15px 0;
        font-size: 16px;
        text-align: left;
      }

      ul {
        margin: 0;
        padding-left: 0;
        list-style-type: none;
        text-align: left;

        li {
          margin-bottom: 12px;
          line-height: 1.6;
          position: relative;
          padding-left: 18px;
          text-align: left;

          &:before {
            content: "•";
            color: #409EFF;
            font-size: 18px;
            position: absolute;
            left: 0;
            top: -2px;
          }

          .diff-added-example {
            background-color: #e6ffed;
            padding: 2px 6px;
            border-radius: 4px;
          }

          .diff-removed-example {
            background-color: #ffeef0;
            padding: 2px 6px;
            border-radius: 4px;
          }
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .code-diff-page {
    padding: 10px;

    .diff-container {
      padding: 15px;
      border-radius: 15px;

      h1 {
        font-size: 24px;
        margin-bottom: 20px;
      }

      .notes {
        padding: 15px;
        margin-top: 30px;

        h3 {
          font-size: 15px;
        }

        ul li {
          font-size: 13px;
          margin-bottom: 8px;
        }
      }
    }
  }
}
</style>
